<html>
<head>

<script type="text/javascript">
var map = new Map();

window.onload = function() {
	//alert("a");
	map.load();
	map.run();
}

function buildDiv(id, className) {
	var div = document.createElement("div");
	if (id)        div.id        = id;
	if (className) div.className = className;
	return div;
}
function buildImg(id, className, src, alt) {
	var img = document.createElement("img");
	if (id)        img.id        = id;
	if (className) img.className = className;
	if (src)       img.src       = src;
	if (alt)       img.alt       = alt;
	return img;
}

function isEven(n) {
	return (n % 2) == 0;
}
function isOdd(n) {
	return (n % 2) != 0;
}
function ij2x(i, j) {
	if (isEven(j)) {
		return i * 80;
	} else {
		return i * 80 + 40;
	}
}
function ij2y(i, j) {
	return j * 40;
}

function PlanetManager() {
	this.planets = new Array();
}

function Map() {
	this.players = new Array();
	this.planets = new Array();

	this.load = function() {
//		this.node = buildDiv("map", "zooma");
		this.node = document.getElementById("map");
		this.node.className = "zooma";

		for (var i = 0; i < 7; ++i) {
			var player = new Player("x"+ i, i);
			this.players.push(player);
		}

		for (var j = -2; j <= 2; ++j) {
			for (var i = -2; i <= 2; ++i) {

				var x = ij2x(i, j);
				var y = ij2y(i, j);

				if (x+y > 160) continue;
				if (x+y <-160) continue;
				if (x-y > 160) continue;
				if (x-y <-160) continue;

//				var owner = new Player("", "0");
				var owner = this.players[0];
				if (i == -1 && j ==-2) owner = this.players[1];
				if (i ==  1 && j ==-2) owner = this.players[2];
				if (i == -2 && j == 0) owner = this.players[3];
				if (i ==  2 && j == 0) owner = this.players[4];
				if (i == -1 && j == 2) owner = this.players[5];
				if (i ==  1 && j == 2) owner = this.players[6];

				var fleet = Math.floor(Math.random()*5);
				var planet = new Planet(x, y, owner, fleet);
				owner.addPlanet(planet);

				this.planets.push(planet);
				this.node.appendChild(planet.node);
			}
		}

//		var x = document.getElementById('x');
//		if (x) x.appendChild(this.node);
//		else alert(x);
	}
	this.run = function() {
		var done = false;
		while(!done) {
			for(var i = 0; i < this.players.length; ++i) {
				var player = this.players[i];
				if (i == 0) continue;

				var orders = player.getOrders();
			}
			done = true;
		}
	}
}
function Planet(x, y, owner, fleet) {
	this.node = buildPlanet(x, y, owner.color, fleet);
	this.owner = owner;
	this.fleet = fleet;

	this.toString = function() {
		return "[planet]";
	}
}
function buildPlanet(x, y, color, fleetNum) {
	var planet = buildDiv(0, "planet");
	planet.appendChild(buildImg(0, 0, "gfx/a12.png", "a"));
	planet.appendChild(buildImg(0, 0, "gfx/a3"+ color +".png", "b"));
	planet.appendChild(buildImg(0, 0, "gfx/a22.png", "c"));

	planet.fleet = buildDiv(0, 0);
	planet.appendChild(planet.fleet);

	planet.style.left = x +"%";
	planet.style.top  = y +"%";

	planet.setFleet = function(fleet) {
		var fleetText = fleet;
		if (fleet == 0) fleetText = "-";
		planet.fleet.innerHTML = fleetText;
	}
	planet.getFleet = function() {
		return 1 * planet.fleet.innerHTML;
	}

	planet.setFleet(fleetNum);

	return planet;
}
function Player(name, color) {
	this.name  = name;
	this.color = color;
	this.planets = new Array();

	this.addPlanet = function(planet) {
		this.planets.push(planet);
	}
	this.delPlanet = function(planet) {
		this.planets.remove(planet);
	}

	this.getOrders = function() {
		setInfo(this.name +" thinks...");

		var orders = new Array();

		for (var i = 0; i < this.planets.length; ++i) {
			var planet = this.planets[i];
			addInfo(planet);

			orders.push(new BuildOrder(planet));
		}

		return orders;
	}
}
function BuildOrder(planet) {
	this.planet = planet;
}

var z = 0;
function zoom(dz) {
//	alert(z +"+"+ dz);
	z += dz;
	if (z < 0) z = 0;
	if (z > 2) z = 2;

	var map = document.getElementById('map');
	switch (z) {
		case 0 : map.className = "zooma"; break;
		case 1 : map.className = "zoomb"; break;
		case 2 : map.className = "zoomc"; break;
	}
}
function endturn() {
}

function setInfo(message) {
	var info = document.getElementById('info');
	info.innerHTML = message;
}
function addInfo(message) {
	var info = document.getElementById('info');
	info.innerHTML += message;
}

</script>

<style type="text/css">

body {
	margin: 0px;
	overflow: hidden;
	background-color: #e0e0e0;
}

div#x {
	position: absolute;
	width:    480px;
	height:   320px;
	left:    -240px;
	top:     -160px;
	margin:   50%;

	overflow: hidden;
	border: 1px solid black;
}

div#actions {
	position: absolute;
	margin: 50%;
}
div#actions img {
	position: absolute;
	width:    40px;
	margin:  -20px;
}
div#actions img:hover {
	background-color: pink;
}

div#head {
	position:         absolute;
	b ackground-color: #c0c0c0;
	o verflow:         hidden;
	width:            100%;

	-w ebkit-border-bottom-left-radius:  40px;
	-w ebkit-border-bottom-right-radius: 40px;

	font-size:     30px;
	font-family:   Sans-Serif;
	line-height:   38px;
	text-align:    center;
	text-overflow: ellipsis;
	white-space:   nowrap;

	b order-style: solid;
	b order-color: black;
	b order-width: 0px 2px 2px 2px;
}
div#head img:first-child {
	float: left;
}
div#head img:last-child {
	float: right;
}

div#foot {
	position: absolute;
	width:    480px;
	bottom:   0px;

	font-size:   30px;
	font-family: Sans-Serif;
	line-height: 40px;
	text-align:  center;
}
div#foot div:first-child {
	fl oat: left;
}
div#foot div:last-child {
	fl oat: right;
}
div#foot span {
	text-overflow: ellipsis;
	white-space:   nowrap;
}

div#map {
	position: absolute;
	margin: 50%;
}
div.zooma {
	background-color: lightblue;
	border: 1px blue solid;

	width: 100px;
	height: 100px;
}
div.zoomb {
	background-color: lightgreen;
	border: 1px green solid;

	width: 200px;
	height: 200px;
}
div.zoomc {
	background-color: lightred;
	border: 1px red solid;

	width: 400px;
	height: 400px;
}

div.center {
	margin: 50%;
}

div.planet {
	position: absolute;
}
div.planet div {
	position:    absolute;
	width:       80px;
	margin:     -40px;

	font-size:   20px;
	font-family: Sans-Serif;
	line-height: 80px;
	text-align:  center;
}
div.planet img {
	position: absolute;
}
div.zooma div.planet img {
	width:  80px;
	margin:-40px;
}
div.zoomb div.planet img {
	width:  160px;
	margin: -80px;
}
div.zoomc div.planet img {
	width:  320px;
	margin:-160px;
}

</style>
<script type="text/javascript">
</script>
</head>
<body>

<div id="x">
<div id="map">
<!--div class="planet" style="top:-80px; left: -80px"><img src="gfx/a22.png" alt="" /><img src="gfx/a31.png" alt="" /><img src="gfx/a12.png" alt="" /><div>2</div></div>
<div class="planet" style="top:-80px; left:   0px"><img src="gfx/a22.png" alt="" /><img src="gfx/a31.png" alt="" /><img src="gfx/a12.png" alt="" /><div>3</div></div>
<div class="planet" style="top:-80px; left:  80px"><img src="gfx/a22.png" alt="" /><img src="gfx/a32.png" alt="" /><img src="gfx/a12.png" alt="" /><div>2</div></div>

<div class="planet" style="top:-40px; left:-120px"><img src="gfx/a22.png" alt="" /><img src="gfx/a30.png" alt="" /><img src="gfx/a12.png" alt="" /><div>-</div></div>
<div class="planet" style="top:-40px; left: -40px"><img src="gfx/a22.png" alt="" /><img src="gfx/a31.png" alt="" /><img src="gfx/a12.png" alt="" /><div>4</div></div>
<div class="planet" style="top:-40px; left:  40px"><img src="gfx/a22.png" alt="" /><img src="gfx/a32.png" alt="" /><img src="gfx/a12.png" alt="" /><div>2</div></div>
<div class="planet" style="top:-40px; left: 120px"><img src="gfx/a22.png" alt="" /><img src="gfx/a32.png" alt="" /><img src="gfx/a12.png" alt="" /><div>4</div></div>

<div class="planet" style="top:  0px; left:-160px"><img src="gfx/a22.png" alt="" /><img src="gfx/a33.png" alt="" /><img src="gfx/a12.png" alt="" /><div>2</div></div>
<div class="planet" style="top:  0px; left: -80px"><img src="gfx/a22.png" alt="" /><img src="gfx/a30.png" alt="" /><img src="gfx/a12.png" alt="" /><div>-</div></div>
<div class="planet" style="top:  0px; left:   0px"><img src="gfx/a22.png" alt="" /><img src="gfx/a34.png" alt="" /><img src="gfx/a12.png" alt="" /><div>8</div></div>
<div class="planet" style="top:  0px; left:  80px"><img src="gfx/a22.png" alt="" /><img src="gfx/a34.png" alt="" /><img src="gfx/a12.png" alt="" /><div>3</div></div>
<div class="planet" style="top:  0px; left: 160px"><img src="gfx/a22.png" alt="" /><img src="gfx/a34.png" alt="" /><img src="gfx/a12.png" alt="" /><div>7</div></div>

<div class="planet" style="top: 40px; left:-120px"><img src="gfx/a22.png" alt="" /><img src="gfx/a33.png" alt="" /><img src="gfx/a12.png" alt="" /><div>3</div></div>
<div class="planet" style="top: 40px; left: -40px"><img src="gfx/a22.png" alt="" /><img src="gfx/a30.png" alt="" /><img src="gfx/a12.png" alt="" /><div>-</div></div>
<div class="planet" style="top: 40px; left:  40px"><img src="gfx/a22.png" alt="" /><img src="gfx/a30.png" alt="" /><img src="gfx/a12.png" alt="" /><div>-</div></div>
<div class="planet" style="top: 40px; left: 120px"><img src="gfx/a22.png" alt="" /><img src="gfx/a36.png" alt="" /><img src="gfx/a12.png" alt="" /><div>4</div></div>

<div class="planet" style="top: 80px; left: -80px"><img src="gfx/a22.png" alt="" /><img src="gfx/a35.png" alt="" /><img src="gfx/a12.png" alt="" /><div>8</div></div>
<div class="planet" style="top: 80px; left:   0px"><img src="gfx/a22.png" alt="" /><img src="gfx/a36.png" alt="" /><img src="gfx/a12.png" alt="" /><div>4</div></div>
<div class="planet" style="top: 80px; left:  80px"><img src="gfx/a22.png" alt="" /><img src="gfx/a36.png" alt="" /><img src="gfx/a12.png" alt="" /><div>2</div></div-->
</div>

<div id="actions">
<!--img src="gfx/b40.png" alt="" style="top:-40px; left: -40px;" />
<img src="gfx/b40.png" alt="" style="top:-40px; left:  40px;" />
<img src="gfx/b40.png" alt="" style="top:  0px; left: -80px;" />
<img src="gfx/b40.png" alt="" style="top:  0px; left:  80px;" />
<img src="gfx/b40.png" alt="" style="top: 40px; left: -40px;" />
<img src="gfx/b40.png" alt="" style="top: 40px; left:  40px;" /-->

<!--img src="gfx/b40.png" alt="" style="top:-60px; left: -60px;" />
<img src="gfx/b40.png" alt="" style="top:-60px; left:  60px;" />
<img src="gfx/b40.png" alt="" style="top:  0px; left:-120px;" />
<img src="gfx/b40.png" alt="" style="top:  0px; left: 120px;" />
<img src="gfx/b40.png" alt="" style="top: 60px; left: -60px;" />
<img src="gfx/b40.png" alt="" style="top: 60px; left:  60px;" /-->

<!--img src="gfx/b48.png" alt="-" style="top:-100px; left:-220px;" />
<img src="gfx/b47.png" alt="+" style="top:-100px; left: 220px;" /-->
</div>

<div id="head">
<img src="gfx/b48.png" alt="" onclick="zoom(-1)" />
<span id="info">Information</span>
<img src="gfx/b47.png" alt="" onclick="zoom(+1)" />
</div>

<div id="foot">
<img src="gfx/b40.png" alt="" style="float: left;" />
<img src="gfx/b49.png" alt="" style="float: right;" onclick="endturn();" />
<div style="float: left; margin: 0px 10px;">80</div>
<div style="float: right; margin: 0px 10px;">END</div>
<!--span>Starship Sleeper 1 23 456 7890 12345</span-->
</div>
</div>

</body>
</html>
